<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <link href="css/style.css" rel="stylesheet"> -->
</head>
<style>
    button {
        position: relative;
    }
</style>

<body>
    <button>我会移动</button>
    <button>我会移动</button>
</body>
<script>
    //闭包动画抖动 动画加速问题
    // let btn = document.querySelector('button');
    // let widthbody = document.querySelector('body').offsetWidth;
    // window.addEventListener('resize', () => {
    //     widthbody = document.querySelector('body').offsetWidth;
    //     console.log(widthbody);
    // });
    // //left拿到外面能防止动画抖动但是会出现 再次点击会出现动画加速问题
    // let find = false;
    // let left = 0;
    // btn.addEventListener('click', function (e) {
    //     //动画抖动问题 是因为每一次点击都会生成一个新的 
    //     //setInterval函数域 而这些这些函数域中的left每次都是从0开始故出现动画抖动问题
    //     console.log(e);

    //     if (!find) {
    //         find = true;
    //         setInterval(() => {
    //             if (left < widthbody - btn.offsetWidth) {

    //             } else {
    //                 left = -10;
    //             }
    //             this.style.left = left++ + 'px';
    //         }, 10);
    //     }
    // })
    //闭包实现排序
    let list = [
        { name: '张三', js: 69, css: 56 },
        { name: '王二', js: 79, css: 36 },
        { name: '麻子', js: 69, css: 56 },
        { name: '头盔', js: 99, css: 76 },
        { name: '刘邦', js: 89, css: 86 },
        { name: '张良', js: 68, css: 96 },
        { name: '韩信', js: 54, css: 86 },
    ];
    //最大值 最小值
    // list = list.reduce((pre, next) => {
    //     return pre.css < next.css ? pre : next;
    // }, 0);
    // console.log(list)
    function callback(field, des) {
        if (des == '升序') {
            return (a, b) => (a[field] < b[field] ? 1 : -1);
        } else {
            return (a, b) => (a[field] > b[field] ? 1 : -1);
        }

    }
    console.table(list.sort(callback('css', '降序')));
    //作用域
    /*全局作用域只有一个，每个函数又都有作用域（环境）。
     *   编译器运行时会将变量定义在所在作用域
     *  使用变量时会从当前作用域开始向上查找变量
     *  作用域就像攀亲亲一样，晚辈总是可以向上辈要些东西
     * 根作用域 就是window ，找到全局 window 即终止应该尽量不要在全局作用域中添加变量。
     *  函数在每次执行后都会删除其内部变量
     * 函数每次调用都会创建一个新作用域
     */
    // function hd() {
    //     let n = 1;
    //     return function () {
    //         let b = 1;
    //         return function () {
    //             console.log(++n);
    //             console.log(++b);
    //         };
    //     };
    // }
    // let a = hd()();
    // a(); //2,2
    // a(); //3,3

    // function User() {
    //     let a = 1;
    //     this.show = function () {
    //         console.log(a++);
    //     };
    // }
    // let a = new User();
    // a.show(); //1
    // a.show(); //2
    // let b = new User();
    // b.show(); //1
    //闭包的作用
    //闭包指子函数可以访问外部作用域变量的函数特性，即使在子函数作用域外也可以访问。
    //闭包一般在子函数本身作用域以外执行，即延伸作用域
    // let btn = document.querySelectorAll('button');
    // btn.forEach((item, index) => {
    //     item.addEventListener('click', e => {
    //         console.log(index);
    //     });
    // })
    //当时用var是 打印的永远是是2  这就意味着 var不能单独作用于 有函数作用域
    // for (var i = 0; i < btn.length; i++) {
    //     btn[i].addEventListener('click', () => {
    //         console.log(i);
    //     });
    // }
    // //这样写也能实现 点几个显示几
    // for (var i = 0; i < btn.length; i++) {
    //     btn[i].onclick = (function (i) {
    //         return function () {
    //             alert(`点击了第${i + 1}个按钮`);
    //         };
    //     })(i);
    // }
</script>

</html>